<template>
  <div id="app">
    <el-row>
      <el-col :span="14">
        <video id="realTimeVideo" controls="" autoplay style="width: 100%;"></video>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form ref="form" label-width="110px" class="video-config-form">
          <el-form-item label="RTSP地址:">
            <el-input v-model="rtspUrl" placeholder="输入rtsp地址"></el-input>
          </el-form-item>
          <el-form-item label="播放延迟(ms):">
            <el-input v-model="delay" placeholder="播放延迟"></el-input>
          </el-form-item>

          <el-form-item label="播放声音">
            <el-select v-model="audio" placeholder="播放延迟">
              <el-option label="是" value="true"></el-option>
              <el-option label="否" value="false"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="doPlayVideo" v-bind:disabled="playIng">播放</el-button>
            <el-button type="warning" @click="stopVideo" v-bind:disabled="!playIng">停止</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { doPalyRtsp, stopPlay } from './util/play.js'
import { strIsNull } from './util/common.js'

export default {
  name: 'App',
  data () {
    return {
      playIng: false,
      rtspUrl: 'rtsp://admin:yzfar123@192.168.0.167:554/cam/realmonitor?channel=1&subtype=0&unicast=true&proto=Onvif',
      delay: 400,
      audio: 'false'
    }
  },
  methods: {
    doPlayVideo () {
      if (strIsNull(this.rtspUrl)) {
        alert('rtsp不能为空')
        return
      }
      this.playIng = true
      this.playObj = doPalyRtsp('realTimeVideo', this.rtspUrl, this.delay, this.audio)
    },
    stopVideo () {
      if (this.playObj) {
        this.playIng = false
        stopPlay(this.playObj)
        this.playObj = null
      }
    }
  }
}
</script>

<style>
.video-config-form {
  padding: 25px;
}
</style>
